<!-- 新增/编辑外勤规则 -->
<template>
  <pageHeaderNew
    :title="title"
    :breadCrumb="breadCrumb"
    showBack
  ></pageHeaderNew>
  <div class="wrap">
    <main>
      <a-form autoLabelWidth>
        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>基础设置</h2>
              </header>
            </template>
            <h4>设置考勤外勤规则名称</h4>
            <a-form-item label="外勤规则名称" field="name" show-colon>
              <a-input style="width: 300px" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="备注" show-colon>
              <a-textarea
                show-word-limit
                :max-length="300"
                :auto-size="{
                  minRows: 3
                }"
                style="width: 500px"
                placeholder="请输入"
              />
            </a-form-item>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>外出规则</h2>
              </header>
            </template>
            <a-form-item label="计算方式" field="calculateWay" show-colon>
              <a-select :style="{ width: '300px' }" placeholder="请选择">
                <a-option :value="1">按工作日计算</a-option>
                <a-option :value="2">按自然日计算</a-option>
              </a-select>
              <a-tooltip
                content="按工作日计算时，休息日不会计入您的外出时长。按自然日计算时，
则会计入您的外出时长。
注：休息日外出，不会增加实际出勤时长和应出勤时长；"
              >
                <icon-info-circle-fill style="color: #165dff" font-size="16" />
              </a-tooltip>
            </a-form-item>
            <a-form-item label="申请时段" field="calculateWay" show-colon>
              <a-select :style="{ width: '300px' }" placeholder="请选择">
                <a-option :value="1">按小时计算</a-option>
                <a-option :value="2">按天计算</a-option>
                <a-option :value="3">按半天计算</a-option>
              </a-select>
              <a-tooltip>
                <template #content>
                  <div>
                    <p>控制员工外出/出差时选择时段的方式:</p>
                    <p>1、按小时，可选9：00-10：00</p>
                    <p>2、按天，可选1月1日-1月2日</p>
                    <p>3、按半天，可选1月1日（上午】</p>
                  </div>
                </template>
                <icon-info-circle-fill style="color: #165dff" font-size="16" />
              </a-tooltip>
            </a-form-item>

            <a-form-item label="更多设置" field="" show-colon>
              <a-checkbox-group direction="vertical">
                <a-checkbox :value="1"
                  >以系统结果为准，禁止员工自行修改时长</a-checkbox
                >
              </a-checkbox-group>
            </a-form-item>
          </a-collapse-item>
        </a-collapse>

        <a-collapse
          :default-active-key="['1']"
          expand-icon-position="right"
          :bordered="false"
        >
          <a-collapse-item key="1">
            <template #header>
              <header>
                <h2>出差规则</h2>
              </header>
            </template>
            <a-form-item label="计算方式" field="calculateWay" show-colon>
              <a-select :style="{ width: '300px' }" placeholder="请选择">
                <a-option :value="1">按工作日计算</a-option>
                <a-option :value="2">按自然日计算</a-option>
              </a-select>
              <a-tooltip
                content="按工作日计算时，休息日不会计入您的外出时长。按自然日计算时，
则会计入您的外出时长。
注：休息日外出，不会增加实际出勤时长和应出勤时长；"
              >
                <icon-info-circle-fill style="color: #165dff" font-size="16" />
              </a-tooltip>
            </a-form-item>
            <a-form-item label="申请时段" field="calculateWay" show-colon>
              <a-select :style="{ width: '300px' }" placeholder="请选择">
                <a-option :value="1">按小时计算</a-option>
                <a-option :value="2">按天计算</a-option>
                <a-option :value="3">按半天计算</a-option>
              </a-select>
              <a-tooltip>
                <template #content>
                  <div>
                    <p>控制员工外出/出差时选择时段的方式:</p>
                    <p>1、按小时，可选9：00-10：00</p>
                    <p>2、按天，可选1月1日-1月2日</p>
                    <p>3、按半天，可选1月1日（上午】</p>
                  </div>
                </template>
                <icon-info-circle-fill style="color: #165dff" font-size="16" />
              </a-tooltip>
            </a-form-item>
            <a-form-item label="更多设置" field="" show-colon>
              <a-checkbox-group direction="vertical">
                <a-checkbox :value="1"
                  >以系统结果为准，禁止员工自行修改时长</a-checkbox
                >
              </a-checkbox-group>
            </a-form-item>
          </a-collapse-item>
        </a-collapse>
      </a-form>
    </main>
    <footer>
      <a-button
        class="btn"
        style="
          margin-right: 20px;
          border: 1px rgba(242, 242, 242, 1) solid;
          background-color: #fff;
        "
        @click="$router.go(-1)"
        >返回</a-button
      >
      <a-button class="btn" type="primary" @click="save">保存</a-button>
    </footer>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute();
const id = route.query?.id;

const title = id ? '编辑外勤规则' : '新增外勤规则';

const breadCrumb: string[] = [
  '考勤',
  '基础设置',
  '考勤设置',
  id ? '编辑外勤规则' : '新增外勤规则'
];
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;

  main {
    margin-bottom: 60px;
    overflow: hidden;
    header {
      h2 {
        display: flex;
        align-items: center;
        // border-bottom: 1px solid rgba(228, 228, 228, 1);
        // padding-bottom: 10px;
      }

      h2::before {
        content: '';
        display: inline-block;
        width: 7px;
        height: 30px;
        background-color: #165dff;
        margin-right: 10px;
      }
    }
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
